<template>
    <div class="wrap">
        <div 
            class="left"
            @click="switchlang(item)"
            v-for="item in locals"
            :class="current===item?'active':''"
            :key="item">{{item}}</div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                locals:["CN",'EN'],
                current:this.$i18n.locale
            }
        },
        mounted(){

        },
        methods:{
            switchlang(lang){
                if(lang === this.current) return;
                this.current = lang;
                this.$i18n.locale = lang;
                console.log(this.$i18n)
            }
        }
    }
</script>

<style lang="less" scoped>
    .wrap {
        width: 88px;
        height: 24px;
        display: flex;
        box-sizing: border-box;
        border: 1px solid #252324;
        align-items: center;
        user-select: none;
        &>div {
            width: 50%;
            flex: 0 0 50%;
            text-align: center;
            color: #252324;
            font-size:16px;
            font-family:"Microsoft YaHei";
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:24px;
            cursor: pointer;
        }
        .active {
            color: #fff;
            background-color: #252324;
        }
    }
</style>